<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> 通知管理
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.title" placeholder="请输入消息标题" class="width300 mr20"></el-input>
				<el-date-picker v-model="query.date" type="datetimerange" range-separator="至" start-placeholder="开始发布日期"
					end-placeholder="结束发布日期" class="mr20">
				</el-date-picker>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
				<el-button icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
			</div>
			<el-button type="primary" icon="el-icon-lx-add" class="margin-top20 margin-bottom20" @click="handleEdit">新建
			</el-button>
			<el-tabs v-model="activeName">
				<el-tab-pane label="APP通知" name="first">
					<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header ">
						<el-table-column type="index" width="55" align="center"></el-table-column>
						<el-table-column prop="title" label="标题" align="center"></el-table-column>
						<el-table-column prop="content" label="内容" align="center"></el-table-column>
						<el-table-column prop="title" label="关联内容" align="center"></el-table-column>
						<el-table-column prop="title" label="发布对象" align="center"></el-table-column>
						<el-table-column prop="title" label="发布时间" align="center"></el-table-column>
						<el-table-column label="操作" align="center">
							<template slot-scope="scope">
								<el-button size="mini" @click="handleEdit(scope.row)">编辑
								</el-button>
								<el-button size="mini" icon="el-icon-delete" class="red"
									@click="handleDelete(scope.$index, scope.row)">删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="短信通知" name="second">
					<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header ">
						<el-table-column type="index" width="55" align="center"></el-table-column>
						<el-table-column prop="title" label="通知类别" align="center"></el-table-column>
						<el-table-column prop="content" label="通知场景" align="center"></el-table-column>
						<el-table-column prop="title" label="短信通知" align="center">
							<template slot-scope="scope">
								<el-switch v-model="scope.row.status"></el-switch>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
					@size-change="handleSizeChange" :current-page="query.pageNumber" :total="pageTotal"
					@current-change="handlePageChange"></el-pagination>
			</div>

		</div>

		<!-- 新增弹出框 -->
		<el-dialog :title="title" :visible.sync="editAddVisible" width="40%">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="标题" prop="title">
					<el-input v-model="form.title" placeholder="请输入标题"></el-input>
				</el-form-item>
				<el-form-item label="内容" prop="content">
					<el-input v-model="form.content" type="textarea" rows="6" placeholder="多行输入"></el-input>
				</el-form-item>
				<el-form-item label="选择用户">
					<el-radio-group v-model="form.radio">
						<el-radio :label="0">全体用户</el-radio>
						<el-radio :label="1">VIP用户</el-radio>
						<el-radio :label="2">指定用户</el-radio>
						<el-radio :label="3">下单用户</el-radio>
					</el-radio-group>
					<div>
						<el-select v-model="form.name" multiple filterable remote reserve-keyword placeholder="请输入用户ID、昵称、手机号"
							:remote-method="remoteMethod" :loading="loading" class="width300" v-if="form.radio==2">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div>
						<el-select v-model="form.name" v-if="form.radio==3" placeholder="请输入下单商品名称" filterable>
							<el-option label="测试" :value="0"></el-option>
						</el-select>
					</div>
				</el-form-item>
				<el-form-item label="关联商品">
					<el-input v-model="form.shop" placeholder="请输入商品ID或名称"></el-input>
				</el-form-item>
				<el-form-item label="关联专题">
					<el-input v-model="form.title" placeholder="请输入商品ID或名称"></el-input>
				</el-form-item>
				<el-form-item label="发布时间">
					<el-date-picker v-model="form.date" type="datetimerange" range-separator="至" start-placeholder="开始发布日期"
						end-placeholder="结束发布日期">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editAddVisible = false">取 消</el-button>
				<el-button type="primary" @click="addNotice">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		name: 'notice',
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				tableData: [],
				editAddVisible: false,
				pageTotal: 0,
				form: {},
				activeName: 'first',
				title: '新建APP通知',
				options: [],
				list: [],
				loading: false
			};
		},
		created() {
			this.getData();
		},
		methods: {
			handleSizeChange(val) {
				this.query.pageSize = val
				this.getData();
			},
			async getData() {
				const res = await this.$get('/admin/notice/pageNotice', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			//新增编辑
			async addNotice() {
				let params = {
					title: this.form.title
				}
				if (this.form.id) {
					params = this.form
				}
				const res = await this.$post('/admin/notice/addNotice', params)
				if (res.code == 1000) {
					this.$message.success('操作成功');
					this.getData();
					this.editAddVisible = false;
				}
			},
			// 触发搜索按钮
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.handleSearch()
			},
			// 删除操作
			handleDelete(index, row) {
				this.$confirm('确定删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.$post('/admin/notice/deleteNotice?id=' + row.id).then(res => {
						if (res.code == 1000) {
							this.$message.success('操作成功');
							this.getData();
						}
					})
				}).catch(() => {
					this.$message.success('处理失败！');
				});
			},
			// 编辑操作
			handleEdit(row) {
				if (row.id) {
					this.title = '编辑'
					this.form = JSON.parse(JSON.stringify(row))
				} else {
					this.title = '新增'
					this.form = {}
				}
				this.editAddVisible = true;
			},
			// 分页导航
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			}
		}
	};
</script>

<style scoped>
</style>